<!-- 旅行拼团订单 -->
<template>
  <div>
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <span></span>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="searchDate"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="guest"
              @keyup[native].enter="searchGuest"
              @change="searchGuest"
              placeholder="预定人"
              :suffix-icon="Search"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="name"
              @keyup[native].enter="searchName"
              @change="searchName"
              placeholder="产品名称"
              :suffix-icon="Search"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="base"
              @change="searchBase"
              placeholder="请选择基地"
              clearable
            >
              <el-option
                v-for="(item, index) in baseOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <StatusBar :data="statusList" default="all" />
      <div class="base_main_margin_top">
        <DataCollectTable
          :data="data"
          :total="total"
          :config="config"
          @operationsHander="opHander.receive"
        >
        </DataCollectTable>
      </div>
    </el-main>
    <CancelOrder ref="cancelOrderRef" @cancelOrder="cancelOrder"></CancelOrder>
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import CancelOrder from "@com/order/CancelOrder.vue";
import {
  OP_KEY,
  COLUMN_TYPE,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { $msg, $box } from "@ui/msg";
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import $ from "@util/base";
import configApi from "@api/config";
import api from "@api/order";

const route = useRoute();

route.watchRouter("travelgrouporder", () => {
  getData();
});

// 1034001 拼团中、1034002 已过期、1034003 待接团、1034004 已接团、1034006 已完成
const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "拼团中",
    value: "1034001",
    total: 0,
  },
  {
    label: "待接团",
    value: "1034003",
    total: 0,
  },
  {
    label: "已接团",
    value: "1034004",
    total: 0,
  },
  {
    label: "已完成",
    value: "1034006",
    total: 0,
  },
]);

const baseOptions = ref([]);
const base = ref(route.query().base || "");
const name = ref(route.query().name || "");
const guest = ref(route.query().guest || "");
const date = ref(route.query().date || []);
const total = ref(0);
const data = ref([]);

getConfig();

function getConfig() {
  configApi.base((val) => {
    baseOptions.value = val;
  });
}

// 1034001 拼团中、1034002 已过期、1034003 待接团、1034004 已接团
function getOperations(data) {
  switch (data.groupStatus) {
    // 拼团中
    case "1034001":
      return [OPERATIONS.check, OPERATIONS.acceptOrder, OPERATIONS.cancelOrder];
    // 待接团
    case "1034003":
      return [OPERATIONS.check, OPERATIONS.acceptOrder, OPERATIONS.cancelOrder];
    // 已接团
    case "1034004":
      return [OPERATIONS.check, OPERATIONS.returned, OPERATIONS.cancelOrder];
    default:
      return [OPERATIONS.check];
  }
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: getOperations,
  },
  column: [
    {
      label: "拼团单编号",
      prop: "groupCode",
      width: 110,
    },
    {
      label: "产品图片",
      prop: "mainPic",
      type: COLUMN_TYPE.picture,
      width: 100,
    },
    {
      label: "产品名称",
      prop: "travelName",
      width: 170,
    },
    {
      label: "产品编号",
      prop: "travelCode",
      width: 110,
    },
    {
      label: "出发日期",
      prop: "travelDate",
      width: 110,
    },
    {
      label: "预定客户",
      prop: "guestInfo",
    },
    {
      label: "拼团状态",
      prop: "status",
      width: 100,
    },
    {
      label: "成团人数",
      prop: "expectNum",
      width: 90,
    },
    {
      label: "报名人数",
      prop: "currentNum",
      width: 90,
    },
    {
      label: "剩余名额",
      prop: "surplusNum",
      width: 90,
    },
    {
      label: "归属基地",
      prop: "shopName",
      width: 100,
    },
  ],
};

const cancelOrderRef = ref(null);
let selectOpData = null;

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  route.push({
    name: "travelgroupdetails",
    query: { code: data.groupCode },
  });
});

opHander.install(OP_KEY.acceptOrder, (data) => {
  $box.open("二次已确认", "是否二次已确认？", () => {
    api.confirm(
      "travelGroup",
      data.groupCode,
      () => {
        $msg.succ("二次已确认成功");
        getData();
      },
      (msg) => {
        $box.open("二次已确认失败", msg);
      }
    );
  });
});

opHander.install(OP_KEY.cancelOrder, (data) => {
  selectOpData = data;
  cancelOrderRef.value.show();
});

opHander.install(OP_KEY.returned, (data) => {
  $box.open("已回团", "确认已回团吗？", () => {
    api.returned(
      data.groupCode,
      () => {
        $msg.succ("已回团成功");
        getData();
      },
      (msg) => {
        $box.open("已回团失败", msg);
      }
    );
  });
});

function cancelOrder(data) {
  if (selectOpData != null) {
    api.cancel(
      {
        type: "travelGroup",
        code: selectOpData.groupCode,
        // amount: data.amount,
        remark: data.reason,
      },
      () => {
        $msg.succ("取消成功");
        getData();
      }
    );
  } else {
    $msg.error("请重新选择记录操作");
  }
}

function searchBase(val) {
  route.replaceQuery("base", val);
}

function searchName(val) {
  route.replaceQuery("name", val);
}

function searchGuest(val) {
  route.replaceQuery("guest", val);
}

function searchDate(val) {
  route.replaceQuery("date", val);
}

getData();
function getData() {
  getNum();
  getList();
}

function getNum() {
  api.num(
    {
      type: "travelGroup",
    },
    (val) => {
      statusData([val.total, val.inGroup, val.completed, val.send, val.end]);
    }
  );
}

function statusData(val) {
  statusList.forEach((e, i) => {
    e.total = val[i];
  });
}

function getList() {
  let routeQuery = route.query();
  let params = {
    type: "travelGroup",
    shopCode: routeQuery.base,
    status: routeQuery.status,
    name: routeQuery.name,
    guest: routeQuery.guest,
    date: routeQuery.date,
    page: routeQuery.p,
    size: routeQuery.s,
  };
  api.orderList(params, (val) => {
    total.value = val.total;
    // val.list = [{groupStatus: "1034001"}, {groupStatus: "1034002"}, {groupStatus: "1034003"}, {groupStatus: "1034004"}]
    data.value = val.list.map((e) => {
      // 1034001 拼团中、1034002 已过期、1034003 待接团、1034004 已接团、1034005 已取消、1034006 已完成
      switch (e.groupStatus) {
        case "1034001":
          e.status = "拼团中";
          break;
        case "1034002":
          e.status = "已过期";
          break;
        case "1034003":
          e.status = "待接团";
          break;
        case "1034004":
          e.status = "已接团";
          break;
        case "1034005":
          e.status = "已取消";
          break;
        case "1034006":
          e.status = "已完成";
          break;
      }
      return e;
    });
  });
}
</script>

<style lang="scss">
</style>
